<template>
  <div>
    <template v-for="(column, index) in dynamicColumns">
      <el-table-column
        v-if="!column.children"
        :key="index"
        :label="column.label"
        :prop="column.prop"
      >
      </el-table-column>

      <el-table-column v-else :key="index" :label="column.label">
        <template slot="header">
          {{ column.label }}
        </template>
        <template v-for="(subColumn, subIndex) in column.children">
          <el-table-column
            v-if="!subColumn.children"
            :key="subIndex"
            :label="subColumn.label"
            :prop="subColumn.prop"
          >
          </el-table-column>

          <el-table-column v-else :key="subIndex" :label="subColumn.label">
            <template slot="header">
              {{ subColumn.label }}
            </template>
            <!-- 递归渲染子表头 -->
            <template v-for="(subSubColumn, subSubIndex) in subColumn.children">
              <el-table-column
                v-if="!subSubColumn.children"
                :key="subSubIndex"
                :label="subSubColumn.label"
                :prop="subSubColumn.prop"
              >
              </el-table-column>
              <!-- 继续递归渲染更深层次的子表头 -->
              <template  v-else>
                <!-- 递归调用自身 -->
                <!-- <recursive-table-column
                  :dynamic-columns="subSubColumn.children"
                  :key="subSubIndex"
                ></recursive-table-column> -->
                <!-- eslint-disable-next-line vue/no-unused-components -->
                <handleTable
                  :dynamicColumns="subSubColumn.children"
                  :key="subSubIndex"
                ></handleTable>
              </template>
            </template>
          </el-table-column>
        </template>
      </el-table-column>
    </template>
  </div>
</template>

<script>
import handleTable from './handleTable.vue'
export default {
  namea: 'handleTable',
  components: { handleTable },
  props: {
    dynamicColumns: {}
  }
}
</script>

<style>
</style>
